<template>
    <div class="beijing" style="width: 400px;height: 598px;">
        <h3>北京区域</h3>
        <br/>
        <ul>
            <li>{{userName || '暂无人员'}} {{post}}</li>
            <!--            <li>{{getUserName()}}</li>-->
        </ul>
        <button v-show="!!userName" style="width: 200px" @click="addPostHandler">设置为Java开发岗</button>
    </div>
</template>

<script>
    export default {
        name: "beijing",
        computed: {
            userName: {
                get() {
                    return this.$store.state.user.name
                }
            },
            post: {
                set(val) {
                    this.$store.state.post = val
                },
                get() {
                    return this.$store.state.post
                }
            }
        },
        methods: {
            // getUserName() {
            //     return this.$store.state.user.name
            // }
            addPostHandler() {
                this.post = "Java开发工程师"
            }
        }
    }
</script>

<style scoped>
    .beijing {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        border: 1px #ff4400 dashed;
        margin: 5px;
        align-items: center;
    }
</style>
